<template>
	<view class="content">
		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
		<u--form
				labelPosition="left"
				:model="userInfo"
				:rules="rules"
				ref="uForm"
		>
			<u-form-item label="头像" prop="avatar" :labelWidth="labelWidth" borderBottom ref="item1" required>
				<u-avatar shape="circle" :src="userInfo.avatar" @click="previewImage"></u-avatar>
				<!-- <u-avatar v-else shape="circle" :src="userInfo.avatar" @click="selceAvatar"></u-avatar> -->
			</u-form-item>
			<u-form-item label="昵称" :labelWidth="labelWidth" prop="nickName" borderBottom ref="item1" required>
				<u--input placeholder="请输入昵称"
						v-model="userInfo.nickName"
						border="none" 
				></u--input>
			</u-form-item>
			<u-form-item label="性别" :labelWidth="labelWidth" prop="sexValue" borderBottom
					@click="showSex = true; hideKeyboard()"
					ref="item1" required
			>
				<u--input
						v-model="userInfo.sexValue"
						disabled
						disabledColor="#ffffff"
						placeholder="请选择性别"
						border="none"
				></u--input>
				<u-icon
						slot="right"
						name="arrow-right"
				></u-icon>
			</u-form-item>
			<u-form-item>
				<u-button shape="circle" class="myBtn" type="warning" @click="save" text="保存"></u-button>
			</u-form-item>
			
		</u--form>
		<u-action-sheet
				:show="showSex"
				:actions="actions"
				title="请选择性别"
				@close="showSex = false"
				@select="sexSelect"
		>
		</u-action-sheet>
	</view>
</template>

<script>
	import { baseUrl } from '@/config/config.js'
	import { getUserInfo,setUserInfo } from '@/config/api.js'
export default {
	data() {
		return {
			labelWidth: 80,
			showSex: false,
			userInfo: {
				avatar: '',
				nickName: '',
				sex: '',
				sexValue:''
			},
			actions: [{
					name: '男',
					value: 1
				},
				{
					name: '女',
					value: 2
				},
				{
					name: '保密',
					value: 0
				},
			],
			rules: {
				'nickName': {
					type: 'string',
					required: true,
					message: '请填写昵称',
					trigger: ['blur', 'change']
				},
				'sexValue': {
					type: 'string',
					min:0,
					max: 2,
					required: true,
					message: '请选择性别',
					trigger: ['blur', 'change']
				},
			},
			radio: '',
			switchVal: false
		};
	},
	onLoad() {
		this.getUser();
	},
	methods: {
		getUser() {
			getUserInfo({}).then((res) => {
				this.userInfo = res.data
				console.log()
				if(res.data){
					if(res.data.sex){
						if(res.data.sex == 0){
							this.userInfo.sexValue = '保密'
						}
						else if(res.data.sex == 1){
							this.userInfo.sexValue = '男'
						}
						else if(res.data.sex == 2){
							this.userInfo.sexValue = '女'
						}
					}
					this.$store.commit('setUserInfo', res.data);
				}
			})
		},
		save(){
			if(this.userInfo.nickName == '' || this.userInfo.nickName.length<=0){
				uni.$u.toast("昵称必填")
				return;
			}
			if(this.userInfo.sexValue == '' || this.userInfo.sexValue.length<=0){
				uni.$u.toast("性别必填")
				return;
			}
			let data = {
				sex: this.userInfo.sex,
				avatar: this.userInfo.avatarUrl,
				nickName: this.userInfo.nickName
			}
			console.log("avatarUrl  ==> ", this.avatarUrl)
			console.log("nickName  ==> ", this.nickName)
			setUserInfo(data).then((res) => {
				if (res.code == 200) {
					uni.$u.toast("保存成功")
					uni.navigateBack();
				} else {
					uni.$u.toast(res.msg)
				}
			})
		},
		sexSelect(e) {
			this.userInfo.sexValue = e.name
			this.userInfo.sex = e.value
			this.$refs.uForm.validateField('sexValue')
		},
		previewImage(){
			if(this.userInfo.avatar){
				let _this = this
				let avatar = this.userInfo.avatar
				uni.previewImage({
					current: this.userInfo.avatar,
					urls: [this.userInfo.avatar],
					longPressActions: {
						itemList: ['更换头像', '保存图片'],
						success: function(data) {
							// console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
							if(data.tapIndex == 0){
								_this.selceAvatar();
							}
							else{
								uni.saveImageToPhotosAlbum({
									filePath: avatar,
									success: function () {
										console.log('保存成功');
										uni.$u.toast("保存成功")
									}
								});
							}
						},
						fail: function(err) {
							uni.$u.toast("保存失败")
							console.log(err.errMsg);
						}
					}
				})
			}
			else{
				this.selceAvatar()
			}
		},
		selceAvatar(){
			let _this = this
			let uploadUrl ='/upload/avatar';
			uni.chooseImage({
				count: 1, //默认9
				fileType: 'image',
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //从相册选择
				success: function (res) {
					uni.$u.http.upload(uploadUrl, {
					    params: {}, /* 会加在url上 */
					    // #ifdef APP-PLUS || H5
					    files: [], // 需要上传的文件列表。使用 files 时，filePath 和 name 不生效。App、H5（ 2.6.15+）
					    // #endif
					    // #ifdef MP-ALIPAY
					    fileType: 'image', // 仅支付宝小程序，且必填。
					    // #endif
					    filePath: res.tempFilePaths[0], // 要上传文件资源的路径。
					    // 注：如果局部custom与全局custom有同名属性，则后面的属性会覆盖前面的属性，相当于Object.assign(全局，局部)
					    custom: {auth: true}, // 可以加一些自定义参数，在拦截器等地方使用。比如这里我加了一个auth，可在拦截器里拿到，如果true就传token
					    name: 'file', // 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
					    // #ifdef H5 || APP-PLUS
					    timeout: 60000, // H5(HBuilderX 2.9.9+)、APP(HBuilderX 2.9.9+)
					    // #endif
					    header: {},  /* 会与全局header合并，如有同名属性，局部覆盖全局 */
					    formData: {}, // HTTP 请求中其他额外的 form data
					    // 返回当前请求的task, options。请勿在此处修改options。非必填
					    getTask: (task, options) => {
					      // task.onProgressUpdate((res) => {
					      //   console.log('上传进度' + res.progress);
					      //   console.log('已经上传的数据长度' + res.totalBytesSent);
					      //   console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);
					      //
					      //   // 测试条件，取消上传任务。
					      //   if (res.progress > 50) {
					      //     uploadTask.abort();
					      //   }
					      // });
					    },
					    //validateStatus: (statusCode) => { // statusCode 必存在。此处示例为全局默认配置。演示，非必填选项
					    //	return statusCode >= 200 && statusCode < 300
					    //}
					}).then(res => {
						// 返回的res.data 已经进行JSON.parse
						console.log("上传成功  ==> ",res);
						console.log("上传成功  ==> ",res.data.url);
						_this.userInfo.avatar = res.data.url;
						console.log("缓存头像  ==> ",_this.userInfo.avatar);
						// uni.$u.toast("上传成功")
					}).catch(err => {
						uni.$u.toast(res.msg)
					})
				}
			});
		},
		upload(tempFiles){
			let uploadUrl = baseUrl + '/uploadAvatar';
			console.log("图片上传地址  ==> ",uploadUrl);
			
		},
		
	},
	onReady() {
		//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    	this.$refs.uForm.setRules(this.rules)
    },
};
</script>

<style scoped>
	.content{
		padding: 20px;
	}
	
	.myBtn{
		width: 80%;
		margin-top: 30px;
	}
</style>